import React from 'react';
import Backdrop from "../../../ui/backdrop/Backdrop.jsx";
import CartContext from "../../../store/CartContext.jsx";
import classes from './CartDetails.module.css'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTrash} from "@fortawesome/free-solid-svg-icons";
import Meal from "../../meals/meal/Meal.jsx";
import Confirm from "../../../ui/confirm/Confirm.jsx";

const CartDetails = () => {
    const ctx = React.useContext(CartContext);

    //控制确认框显示
    const [showConfirm, setShowConfirm] = React.useState(false);

    const showConfirmHandler = () => {
        setShowConfirm(true);
    }
    const cancelHandler = (e) => {
        e.stopPropagation();
        setShowConfirm(false);
    }
    const okHandler = () => {
        //清空购物车
        ctx.cartDispatch({type:'CLEAR'})
    }
    return (
        <Backdrop >
            {showConfirm && <Confirm onCancel={cancelHandler} onOk={okHandler} confirmText={"确认清空购物车吗？"}/>}
            <div className={classes.cartDetails}  onClick={e => e.stopPropagation()}>
                <header className={classes.header}>
                    <h2 className={classes.title}>商品详情</h2>
                    <div className={classes.clear} onClick={showConfirmHandler}>
                        <FontAwesomeIcon icon={faTrash}/>
                        <span>清空购物车</span>
                    </div>

                </header>
                <div className={classes.meals}>
                    {
                        ctx.items.map(item => {
                            return <Meal key={item.id} noDesc meal={item} />
                        })
                    }
                </div>
            </div>
        </Backdrop>
    );
};

export default CartDetails;
